<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    table{
        text-align: center;
        border: 1px solid black;
        border-collapse: collapse;
    }
    tr,th,td{
        border: 1px solid black;
    }
</style>
<body>
    <!-- 使用ajax获取接口列表 ：
        要求将列表循环显示到表格当中
        接口地址： https://liu.zzgoodqc.cn/hello GET方法请求 -->
    <table id="tab">
   
    </table>
    <button id="btn">获取</button>
</body>
<script>
    var str = ''
    btn.onclick = function () {

        var xhr = new XMLHttpRequest()
        console.log(xhr);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                console.log(xhr);
                var res = JSON.parse(xhr.responseText)
                console.log(res);

                console.log(res.data);
                for (var i in res.data) {
                    console.log(res.data[i].title);
                    str += `  <tr>
                                        <td>${res.data[i].title}</td>
                                    </tr>`
                    tab.innerHTML = str
                }


            }
        }
        xhr.open('GET', ' https://liu.zzgoodqc.cn/hello', true)
        xhr.send()
    }
</script>

</html>